<template>
  <!-- 
	swiper中的transfrom会使fixed失效,此时用height固定高度; 
	swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
	-->
  <!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
  <!-- top的高度等于悬浮菜单tabs的高度 -->
  <view class="rel">
    <!--  标题 -->
    <view class="flex-row align-center head">
      <view class="name">名称</view>
      <view class="price" @click="setQury('f2')"
        >最新价
        <tui-icon
          :size="14"
          color="#989898"
          :name="query.po == 1 ? 'turningup' : 'turningdown'"
          v-if="query.fid == 'f2'"
        ></tui-icon>
      </view>
      <view class="up-down" @click="setQury('f3')"
        >涨幅
        <tui-icon
          :size="14"
          color="#989898"
          :name="query.po == 1 ? 'turningup' : 'turningdown'"
          v-if="query.fid == 'f3'"
        ></tui-icon>
      </view>
    </view>

    <!-- 滚动数据 -->
    <mescroll-uni
      :ref="'mescrollRef' + i"
      @init="mescrollInit"
      :height="height"
      :down="downOption"
      @down="downCallback"
      :up="upOption"
      @up="upCallback"
      @emptyclick="emptyClick"
    >
      <!-- 数据列表 -->
      <rt-list :list="list"></rt-list>
    </mescroll-uni>
  </view>
</template>

<script setup>
  import { ref, watch, reactive } from 'vue';
  import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
  import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';

  import * as apis from '@/api/index.js';

  // 组件
  import rtList from './rt-list.vue';

  const props = defineProps({
    i: Number, // 每个tab页的专属下标
    index: {
      // 当前tab的下标
      type: Number,
      default() {
        return 0;
      },
    },
    tabs: {
      // 为了请求数据,演示用,可根据自己的项目判断是否要传
      type: Array,
      default() {
        return [];
      },
    },
    height: [Number, String], // mescroll的高度
  });

  const emit = defineEmits(['init']);

  // mescroll-uni不用传onPageScroll, onReachBottom
  const { mescrollInit, downCallback, getMescroll } = useMescroll(
    onPageScroll,
    onReachBottom
  ); // 调用mescroll的hook
  defineExpose({ getMescroll }); // 使父组件可以通过ref调用到getMescroll方法 (必须)

  const isAutoInit = props.i === props.index; // 自动加载当前tab的数据
  const downOption = {
    auto: isAutoInit, // 自动加载当前tab的数据
  };

  const upOption = {
    auto: false, // 不自动加载
    noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
    empty: {
      tip: '~ 暂无数据 ~', // 提示
      // btnText: '去看看',
    },
  };

  const isInit = ref(isAutoInit); // 当前tab是否已初始化
  const list = ref([]); // 数据列表

  const query = reactive({
    po: 1,
    fid: 'f3',
  });

  // 监听下标的变化
  watch(
    () => props.index,
    (val) => {
      if (props.i === val && !isInit.value) mescrollTrigger();
    }
  );

  // 主动触发加载
  const mescrollTrigger = () => {
    isInit.value = true; // 标记为true
    const mescroll = getMescroll();
    if (mescroll) {
      if (mescroll.optDown.use) {
        mescroll.triggerDownScroll();
      } else {
        mescroll.triggerUpScroll();
      }
    }
  };

  //点击空布局按钮的回调
  const emptyClick = () => {
    uni.showToast({
      title: '点击了按钮,具体逻辑自行实现',
    });
  };

  /*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
  const upCallback = (mescroll) => {
    console.log('upCallback', upCallback);
    // 联网加载数据
    let apiName = props.tabs[props.i].api;

    apis[apiName]({
      size: mescroll.size,
      page: mescroll.num,
      type: props.i + 1,
    }).then((res) => {
      emit('init');
      if (mescroll.num == 1) list.value = [];
      if (res.code == 1) {
        if (res.data.list.length) {
          res.data.list.forEach((v) => {
            v.trade = (v.trade * 1).toFixed(2);
            v.changepercent = (v.changepercent * 1).toFixed(2);
            v.code = v.symbol.substring(2);
            v.marketCode = v.symbol.substring(0, 2);
          });
        }

        list.value = list.value.concat(res.data.list);
        mescroll.endSuccess(res.data.list.length);
      } else {
        mescroll.endErr();
      }
    });
  };

  // 设置查询
  const setQury = (type) => {
    if (query.fid == type) {
      query.po = query.po == 1 ? 0 : 1;
    } else {
      query.po = 1;
    }
    query.fid = type;
    downCallback();
  };
</script>
<style lang="scss" scoped>
  .name,
  .price,
  .up-down {
    box-sizing: border-box;
    text-align: center;
  }
  .name {
    width: 50%;
    text-align: left;
  }
  .price,
  .up-down {
    width: 25%;
  }

  .rel {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 22rpx;

    //  header
    .head {
      position: sticky;
      top: 0;
      z-index: 99;
      height: 80rpx;
      padding: 0 20rpx;
      border-bottom: 2rpx solid #e2e2e2;
      color: #989898;
      text-align: left;
      font-style: normal;
    }
  }
</style>
